<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			图形的变换
			CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
			
			1位移translate(x,y)
				用法：transform: translate(45px)  或者 transform: translate(45px, 150px);				
				参数表示移动距离，单位px，				
				一个参数时：表示水平方向的移动距离；
				两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离
				
				translate(x,y)函数是将整个canvas水平移动x距离，垂直移动y距离。
				canvas是以（0,0）为默认原点，其原点默认在屏幕左上角；通过translate（x，y）把点（x，y）作为原点。
				需要注意的是：是在原点的基础上分别偏移x和y。
				例子：原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。
			2旋转rotate(deg)
				用法：transform: rotate(45deg);
				共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
			3缩放scale(sx,sy)
				用法：transform: scale(0.5)  或者  transform: scale(0.5, 2);
				参数表示缩放倍数；				
				一个参数时：表示水平和垂直同时缩放该倍率
				两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
				注意会吧起始点（偏移量）和线条宽度一同缩放！
			4倾斜 skew
				用法：transform: skew(30deg)  或者 transform: skew(30deg, 30deg);
				参数表示倾斜角度，单位deg			
				一个参数时：表示水平方向的倾斜角度；
				两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
			5基准点 transform-origin
				在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。	
				用法：transform-origin: 10px 10px;					
				共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；					
				两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
		
六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate
		
		图形的保存
		 context.save();
		 context.restore();
		
		-->
	</head>
	<body>
			<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
			window.onload = function(){
				//lineWidth线条的宽度
				//lineCap线条两端的形状
				//默认butt(无) round  square
			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
			 
	 var context = canvas.getContext("2d");//2d环境
	 
	 //设置一个保存点
	 context.save();//和 context.restore()成对出现，
	 
	 context.lineWidth=10;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	 context.fillStyle="red";//填充色
 context.translate(100,100);//位移
 context.fillRect(0,0,400,400);//0,0点 400，400的矩形
 //context.translate(-100,-100);//绘制完成后归0
 context.restore();//调用restore函数，把自调用save函数以来应用的所有效果从画布上移除。
   
   //在画一个
   context.save();
     context.fillStyle="blue";//填充色
 context.translate(300,300);//会和上一次的叠加 变为 （400,400）
 context.fillRect(0,0,400,400);//0,0点 400，400的矩形
  context.restore();

}
		
		
	</script>
</html>
